$(function () {
    //0.获取Id，a链接跳转的地址后面直接加问号
    //console.log(location.href.split("=")[1];); 
    //0.1根据Id获取文章信息，初始化form
    //确保文章分类渲染完成再初始化
    function initForm() {
        let id = location.href.split("=")[1];
        axios({
            method: "GET",
            url: '/my/article/' + id,
        }).then(res => {
            if (res.data.status != 0) return layer.msg(res.data.message);
            //表单赋值
            //富文本编辑器和封面是第三方插件不能赋值
            form.val('formEdit', res.data.data)
            //富文本编辑器赋值，为了解决一些电脑太慢，ajax请求已经发送完毕，但是富文本编辑器还没有赋值
            setTimeout(
                function () {
                    tinyMCE.activeEditor.setContent(res.data.data.content);
                }, 500
            )
            //封面赋值
            let baseURL = "http://api-breakingnews-web.itheima.net";
            let url = baseURL + res.data.data.cover_img;
            $image
                .cropper('destroy')      // 销毁旧的裁剪区域
                .attr('src', url)  // 重新设置图片路径
                .cropper(options)        // 重新初始化裁剪区域
        })
    }

    //1.初始化文章分类
    let layer = layui.layer;
    let form = layui.form;
    initArtCateList();
    function initArtCateList() {
        axios({
            method: 'GET',
            url: '/my/article/cates',
        }).then(res => {
            if (res.data.status !== 0) return layer.msg(res.data.message);
            let arr = [`<option value="">请选择文章类别</option>`];
            res.data.data.forEach(ele => {
                arr.push(
                    `
                     <option value="${ele.Id}">${ele.name}</option>
                    `
                )
            });
            $('[name=cate_id]').empty().html(arr.join(''));
            //有些表单元素是动态插入的，这时 form 模块 的自动化渲染是会对其失效的
            //option是动态插入的，form.render()必须写，否则option列表不显示
            form.render()

            //初始化form
            initForm();
        })
    }

    //2.初始化富文本编辑器
    //括号里不写具体要初始化的东西，默认把页面所有的textarea初始化
    initEditor();

    //3.文章封面
    // 3.1 初始化图片裁剪器
    let $image = $('#image')
    // 3.2 裁剪选项
    let options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }
    // 3.3 初始化裁剪区域
    $image.cropper(options)

    //3.4 选择封面
    $('#btnChangeImg').on('click', function () {
        $('#file').click()
    });
    $('#file').on('change', function (e) {
        let file = e.target.files[0];
        if (file === undefined) return layer.msg('未上传文章封面！')
        var newImgURL = URL.createObjectURL(file)
        $image
            .cropper('destroy')      // 销毁旧的裁剪区域
            .attr('src', newImgURL)  // 重新设置图片路径
            .cropper(options)        // 重新初始化裁剪区域

    })

    //请求体参数state
    let state;
    $('#btnSave1').on('click', function () {
        state = '已发布'
        //console.log(state);
    })
    $('#btnSave2').on('click', function () {
        state = '草稿'
        //console.log(state);

    })

    //4.表单提交
    //根据接口文档确定请求体类型和参数
    $('#formPub').on('submit', function (e) {
        e.preventDefault();
        let fd = new FormData(this)
        //'state'参数名
        fd.append('state', state)
        // console.log(...fd);
        // fd.forEach(ele => {
        //     console.log(ele);
        // })
        $image.cropper('getCroppedCanvas', {
            // 创建一个 Canvas 画布   
            width: 400, height: 280
        })
            .toBlob(function (blob) {
                // 将 Canvas 画布上的内容，转化为文件对象   
                // 得到文件对象后，进行后续的操作 
                fd.append('cover_img', blob);
                //上传文件的ajax，axios,也要写到这个回调函数中
                //①ajax
                /*        $.ajax({
                           method: 'POST',
                           url: 'http://api-breakingnews-web.itheima.net/my/article/edit',
                           //！！！！！这两个false总是写错，得注意！！！
                           contentType: false,
                           processData: false,
                           data: fd,
                           headers: {
                               Authorization: localStorage.getItem('token')
                           },
                           success: function (res) {
                               console.log(res);
                               layer.msg(res.message)
                           }
       
                       }) */
                //②axios
                axios({
                    method: 'POST',
                    url: "/my/article/edit",
                    //不设置默认传递参数方式，不设置默认编码
                    data: fd
                }).then(res => {
                    if (res.data.status !== 0) return layer.msg(res.data.message)
                    layer.msg("恭喜您，修改文章成功！")
                    //跳转至文章列表页
                    //用定时器更好一点，成功后等待1.5s跳转
                    setTimeout(
                        function () {
                            window.parent.document.querySelector('#artList').click()
                        }, 1500
                    )
                })
            });

    })




})